import { defineComponent, onMounted, ref } from "vue";
import { translateDict } from "@/api/dict";

export default defineComponent({
  name: "DictTranslateTag",
  props: {
    code: {
      type: String,
      required: true,
    },
    size: {
      default: "default",
      validator: (v: string) => ["default", "small", "large"].includes(v),
      string: ["default", "small", "large"],
    },
    type: {
      default: "",
      validator: (v: string) =>
        ["success", "warning", "info", "danger", ""].includes(v),
    },
  },
  setup(props) {
    const text = ref("");
    const type = ref("");
    onMounted(() => {
      translateDict(props.code)
        .then(res => {
          text.value = res;
          type.value = props.type;
        })
        .catch(e => {
          console.log(e);
          text.value = "错误";
          type.value = "danger";
        });
    });
    return () => (
      <>
        <el-tag size={props.size} type={type.value} effect="plain">
          {text.value}
        </el-tag>
      </>
    );
  },
});
